import 'package:flutter/material.dart';

import '../../tools/keepAliveWrapper.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen>
    with SingleTickerProviderStateMixin, AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  int _currentIndex = 0;

  late TabController _tabController;

  List<String> list = [];

  //生命周期函数:当组件初始化的时候就会触发
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 8, vsync: this);

    //监听——tabController 的改变事件,获取当前的 索引值，能够获取得到索引值，那么就可以根据索引值来获取和区分数据
    _tabController.addListener(() {
      if (_tabController.animation!.value == _tabController.index) {
        print(_tabController.index);
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose(); //销毁 controller
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        //可以配置appBar 的高度
        preferredSize: const Size.fromHeight(50), //AppBar 高度
        child: Container(
          height: 85,
          child: AppBar(
              title: TabBar(
                  isScrollable: true, //是否允许滚动
                  indicatorColor: Colors.green, //指示器颜色
                  indicatorWeight: 2, // 指示器高度
                  indicatorPadding: const EdgeInsets.all(
                      0), //指示器的padding  // 比如控制 indicator 长度
                  // indicatorSize:TabBarIndicatorSize.label,
                  labelColor: Colors.green, // 选中lkabel 的颜色
                  unselectedLabelColor: Colors.grey, //未选中label颜色
                  labelStyle: const TextStyle(fontSize: 18), //选中label的Style
                  unselectedLabelStyle: const TextStyle(fontSize: 14),
                  // indicatorSize: TabBarIndicatorSize.label, //指示器的大小和label size 大小一致
                  /*    indicator: BoxDecoration(
                    //指示器的装饰器
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(2)),*/
                  controller:
                      _tabController, //注意：配置controller需要去掉TabBar上面的const
                  onTap: (index) {
                    print('onTap 监听 tabBar 的 点击事件，无法监听滑动事件:$index');
                  },
                  tabs: const [
                Tab(
                  child: Text("推荐"),
                ),
                Tab(
                  child: Text("热门"),
                ),
                Tab(
                  child: Text("视频"),
                ),
                Tab(
                  child: Text("分享"),
                ),
                Tab(
                  child: Text("旅拍"),
                ),
                Tab(
                  child: Text("篮球"),
                ),
                Tab(
                  child: Text("足球"),
                ),
                Tab(
                  child: Text("热门"),
                ),
              ])),
        ), //可以配置Appbar 高度
      ),
      //  body: _children[_currentIndex],
      body: TabBarView(controller: _tabController, children: [
        KeepAliveWrapper(
            child: ListView(
          children: const [
            ListTile(
              title: Text("我是推荐列表0"),
            ),
            ListTile(
              title: Text("我是推荐列表1"),
            ),
            ListTile(
              title: Text("我是推荐列表2"),
            ),
            ListTile(
              title: Text("我是推荐列表3"),
            ),
            ListTile(
              title: Text("我是推荐列表4"),
            ),
            ListTile(
              title: Text("我是推荐列表5"),
            ),
            ListTile(
              title: Text("我是推荐列表6"),
            ),
            ListTile(
              title: Text("我是推荐列表7"),
            ),
            ListTile(
              title: Text("我是推荐列表8"),
            ),
            ListTile(
              title: Text("我是推荐列表9"),
            ),
            ListTile(
              title: Text("我是推荐列表10"),
            ),
            ListTile(
              title: Text("我是推荐列表11"),
            ),
            ListTile(
              title: Text("我是推荐列表12"),
            ),
            ListTile(
              title: Text("我是推荐列表13"),
            ),
            ListTile(
              title: Text("我是推荐列表14"),
            ),
            ListTile(
              title: Text("我是推荐列表15"),
            ),
            ListTile(
              title: Text("我是推荐列表16"),
            ),
            ListTile(
              title: Text("我是推荐列表17"),
            ),
            ListTile(
              title: Text("我是推荐列表18"),
            ),
            ListTile(
              title: Text("我是推荐列表19"),
            ),
          ],
        )),
        ListView(
          children: const [
            ListTile(
              title: Text("我是热门列表"),
            ),
            ListTile(
              title: Text("我是热门列表"),
            ),
            ListTile(
              title: Text("我是热门列表"),
            ),
            ListTile(
              title: Text("我是热门列表"),
            ),
            ListTile(
              title: Text("我是热门列表"),
            ),
            ListTile(
              title: Text("我是热门列表"),
            ),
            ListTile(
              title: Text("我是热门列表"),
            ),
          ],
        ),
        ListTile(
          title: Text("我是热门列表"),
        ),
        ListTile(
          title: Text("我是热门列表"),
        ),
        ListTile(
          title: Text("我是热门列表"),
        ),
        ListTile(
          title: Text("我是热门列表"),
        ),
        ListTile(
          title: Text("我是热门列表"),
        ),
        ListTile(
          title: Text("我是热门列表"),
        )
      ]),
    );
  }
}
